<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_2_固定定位广告条</title>
    <style>
        .top {
            background-color: #5AA4AE;
            height: 120px;
            color: #fff;
            font-size: 30px;
            /*使用固定定位*/
            position: fixed;
            top: 0;
            /*设置宽度为视口(view port)宽度的100%*/
            width: 100vw;
        }
        .main {
            /* 让内容向下一点 不然会遮住部分文字 */
            margin-top: 130px;
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #FFF799;
            left: 20px;
        }
        .right{
            background-color: #F35336;
            right: 20px;
        }
    </style>

</head>
<body>
<div class="top">我是顶部广告条</div>
<div class="left">我是左侧广告条</div>
<div class="right">我是右侧广告条</div>
<div class="main">
    我是内容
    <!--lorem*60-->
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque aut, doloremque enim natus nobis quod tempora
        temporibus tenetur veniam! Animi architecto cum iste neque odit, similique veniam voluptatibus voluptatum!
    </div>
    <div>Adipisci assumenda at dicta dolor doloremque earum eius eligendi eos et eveniet in magni minima molestiae nemo
        omnis quasi quisquam, rerum ut veritatis voluptate! Eius laboriosam officia quis reprehenderit totam?
    </div>
    <div>Accusantium, aliquid amet atque, distinctio expedita hic, in iste maxime nam possimus provident ratione
        repudiandae vel! Aspernatur, consequuntur corporis ducimus error ex, inventore iste laboriosam quae repellat
        rerum tempore veniam!
    </div>
    <div>Accusantium aliquam aspernatur assumenda consequuntur cupiditate deserunt dignissimos doloremque dolores earum
        exercitationem expedita, ipsam itaque minima molestiae mollitia nisi porro quas qui soluta sunt temporibus totam
        unde ut vitae voluptatum.
    </div>
    <div>Ab, amet deleniti dolorem, error facilis fugiat iusto maiores optio quas quibusdam quos reiciendis, rem
        suscipit! Aspernatur autem commodi eligendi magnam! Aliquid cumque eos est eum excepturi explicabo illum, ut.
    </div>
    <div>Ab aspernatur at autem blanditiis consectetur corporis dignissimos dolorum, eum eveniet itaque maxime minus
        molestiae omnis placeat provident recusandae repudiandae sequi ut. Autem commodi esse illo optio porro
        praesentium sint.
    </div>
    <div>Corporis incidunt labore maiores maxime nemo pariatur possimus quos recusandae sapiente velit? Expedita modi
        nihil quod tempora! Ad commodi, culpa cupiditate ex laudantium natus nostrum officiis, omnis, sapiente soluta
        unde?
    </div>
    <div>Ad culpa fugit iure mollitia quo recusandae totam. Animi at deleniti dolor expedita iste minima mollitia natus
        nulla odio omnis perspiciatis quaerat quas, quis repellat similique sit tempore voluptatem voluptatum.
    </div>
    <div>Autem commodi doloremque earum exercitationem explicabo iusto modi molestias nostrum repellendus sapiente sequi
        sint sit tempore ullam, unde ut voluptate voluptatem. Consectetur hic magni, maiores molestiae placeat quae
        quasi sunt?
    </div>
    <div>Ad aliquam aut consequuntur cupiditate dicta dolor dolores ea explicabo facilis in laborum magnam, maxime
        mollitia, necessitatibus nihil nulla odio, pariatur perferendis possimus quam qui saepe sapiente sit unde
        voluptates.
    </div>
    <div>Accusantium aliquam amet autem dignissimos eius error eveniet ex illum ipsum iusto nesciunt praesentium quis
        quod, suscipit tempora vero voluptate voluptatem. Accusantium at dolorum illum perferendis quod reiciendis, sed
        suscipit!
    </div>
    <div>Ab animi, consectetur dignissimos dolor doloremque doloribus eius eligendi excepturi harum impedit ipsa iste
        maxime molestiae molestias nemo numquam perferendis, totam? Aliquid aperiam deleniti dignissimos dolores
        laudantium numquam qui quod.
    </div>
    <div>A culpa dolor doloribus, ea eos hic ipsum laborum magnam mollitia obcaecati pariatur quam quidem, quis sit
        voluptates? Alias aliquid aperiam commodi consectetur cumque eum facilis natus odio quaerat sapiente.
    </div>
    <div>Cum error reprehenderit vitae. A commodi deleniti dignissimos ducimus eius excepturi laudantium magnam, nam
        odit pariatur quae quos repudiandae, saepe sint tempore vel, voluptatibus. Animi delectus dolorem rerum suscipit
        tempora.
    </div>
    <div>At atque culpa cumque magnam mollitia nam, quia temporibus veniam vero voluptatibus! Asperiores consectetur,
        distinctio dolor, ducimus et labore magnam modi molestias nihil obcaecati porro possimus quia quisquam
        reprehenderit voluptatibus?
    </div>
    <div>Animi, aperiam blanditiis delectus dicta, distinctio ducimus earum eos exercitationem facilis, magni officia
        omnis repellendus soluta suscipit veniam! Ab, animi beatae deserunt ducimus nulla recusandae. Eum excepturi
        fugiat magnam nobis!
    </div>
    <div>Delectus distinctio, doloribus excepturi exercitationem illo iure minima nesciunt pariatur, similique, tempore
        veniam voluptatibus? Accusamus aliquam at consectetur deserunt ducimus eos et eum laudantium nisi unde? Alias
        atque consequatur incidunt.
    </div>
    <div>Asperiores aut consequuntur doloremque harum id impedit itaque magni minus modi nobis, perferendis perspiciatis
        quidem similique tempore vel. Cupiditate distinctio fugiat illo laboriosam laborum officiis, qui sed suscipit
        ullam. Ab?
    </div>
    <div>Cum et pariatur quaerat quisquam suscipit. Assumenda distinctio ducimus ipsum iusto libero magnam minima
        officiis placeat, quo quod, rem, reprehenderit soluta voluptas. Ad aperiam asperiores consectetur hic laboriosam
        nobis vel.
    </div>
    <div>Amet, aperiam consequatur consequuntur deleniti dolor doloremque est et exercitationem ipsa laudantium libero
        molestiae natus optio perspiciatis placeat qui reiciendis, rerum sapiente tempore vitae. Deserunt explicabo fuga
        quia rem voluptatibus.
    </div>
    <div>Accusantium aliquam nihil sapiente vitae? Corporis cupiditate dignissimos eaque harum ipsam obcaecati
        perspiciatis temporibus. Magni modi perspiciatis quidem sed voluptatem. Quod, veritatis, voluptas? Consectetur
        cupiditate laboriosam obcaecati quod ut vitae.
    </div>
    <div>Accusantium ad, at atque beatae culpa delectus deleniti dolore dolorum ducimus eligendi est inventore, labore
        laboriosam laborum magni modi molestiae nulla omnis optio placeat porro provident quidem quo tempora voluptate?
    </div>
    <div>Adipisci aut cumque earum illo iure iusto magni quam quo reiciendis rem repellendus, vero? A aliquid aspernatur
        cumque dicta ducimus ea enim fuga, iure maiores quasi temporibus vel veniam, voluptatibus!
    </div>
    <div>Accusantium dolorem fugit modi optio quod saepe similique tenetur veniam veritatis voluptas? Amet animi aperiam
        cum cumque, error, et ex ipsam maxime minima molestias neque nobis odit quas qui tenetur.
    </div>
    <div>Ab ad delectus dolore, dolorem dolores esse eveniet excepturi exercitationem inventore magnam maxime, minima
        quis reprehenderit repudiandae, saepe similique tempore tenetur totam ullam velit? Aperiam architecto beatae
        itaque possimus sed.
    </div>
    <div>Alias beatae corporis culpa cupiditate dicta eligendi error fuga, fugit in inventore iusto laborum laudantium
        maxime minus nobis obcaecati omnis quasi quod sed soluta temporibus ullam unde. Eligendi, molestiae, quasi.
    </div>
    <div>Aliquam aliquid architecto beatae dolorem dolores harum incidunt ipsum molestiae, nam nisi nulla omnis placeat
        quae quasi quisquam repellat saepe. Cum esse id laboriosam molestiae officia quae quam sapiente tempore!
    </div>
    <div>Delectus eligendi perferendis quod! Ad, aut commodi cumque delectus dicta ducimus ea est excepturi mollitia non
        nostrum nulla obcaecati odit officiis quasi reiciendis repudiandae sequi suscipit unde velit voluptate
        voluptates!
    </div>
    <div>Asperiores doloremque dolores ea facilis iure pariatur praesentium rem sed tempora voluptatibus? Asperiores
        consequuntur cupiditate, dicta dolorem, eius et ex exercitationem harum illo ipsam laborum magnam, quam sequi
        sint voluptatum.
    </div>
    <div>Aliquam asperiores necessitatibus odit provident repudiandae. Alias aspernatur dignissimos distinctio dolorum
        eveniet facere hic illo ipsam iure molestias nulla, officiis repellat repudiandae soluta, unde. Aut culpa
        expedita harum neque temporibus.
    </div>
    <div>Dolores ipsam iusto odit. Atque quibusdam reprehenderit tempore. Ab consequuntur culpa cum debitis, distinctio
        earum eos eveniet fugit illo incidunt iusto maxime minus molestias quod ratione repudiandae saepe sit
        temporibus.
    </div>
    <div>Aut, optio, recusandae! Aliquid beatae culpa cum, dignissimos esse facilis illum ipsa ipsam ipsum laboriosam
        minus necessitatibus neque nesciunt nobis odit perspiciatis quasi quia, ratione reprehenderit sunt ullam
        voluptatem voluptates.
    </div>
    <div>Aliquam beatae consequuntur dicta dolor esse est harum, id ipsa, labore perferendis quam quibusdam, quidem quo
        rem soluta velit vitae? Ab dignissimos eius maiores nesciunt quisquam quos rem sunt temporibus.
    </div>
    <div>Asperiores incidunt laudantium non omnis quos? At fuga porro quasi sed vitae. Aliquam aliquid architecto aut
        consectetur earum, facilis fuga magni nulla officia omnis quasi quis quisquam saepe temporibus voluptate!
    </div>
    <div>Aliquam aliquid aspernatur atque autem beatae blanditiis consequuntur culpa earum, eius eligendi error esse est
        et impedit in laboriosam modi molestiae nam odio praesentium provident repellat reprehenderit saepe, velit
        voluptatem!
    </div>
    <div>At deleniti molestias sed veniam voluptatum? Alias, cupiditate eligendi magni maiores maxime neque odit quam
        quasi quod repudiandae? Dolor dolorem eos eveniet expedita facilis fugiat fugit itaque reprehenderit similique
        voluptatibus.
    </div>
    <div>Atque autem est ipsa officia perspiciatis quibusdam tenetur. Architecto assumenda at, cumque dolores eius et
        expedita explicabo libero magni maxime natus non numquam perspiciatis rem sunt suscipit tempore vel veniam.
    </div>
    <div>Ad aliquam amet asperiores autem beatae cum debitis delectus doloremque eius, eos eum, expedita hic iste modi
        necessitatibus nisi nobis obcaecati praesentium qui quis quo sequi soluta, suscipit tempora temporibus.
    </div>
    <div>Consectetur dolorem eius enim eveniet exercitationem maxime natus nulla provident quasi, quibusdam quis rerum
        similique sint unde voluptates. Aut deleniti dolorem doloribus et hic iure laboriosam nemo nostrum sed vero!
    </div>
    <div>Accusantium alias culpa eaque eos laborum, magni minus nemo nesciunt nostrum, numquam odio officia provident
        qui sapiente sequi similique sint sit totam voluptas voluptates. Asperiores distinctio molestias numquam porro
        sint?
    </div>
    <div>Aut consectetur dignissimos doloremque ea expedita maxime nobis perspiciatis quam, tenetur veritatis. A
        adipisci animi at corporis cum cupiditate eius eos est et harum illum impedit ipsam sed, soluta, ut?
    </div>
    <div>Ab ad aliquam beatae dolore ipsum iure laborum maxime nostrum quaerat, quos rerum suscipit tempore voluptatum.
        Ad amet dolorum ex illum quas quidem similique? Autem commodi dolor error quaerat reprehenderit!
    </div>
    <div>At itaque nesciunt quisquam veniam! Accusantium atque blanditiis consectetur debitis dicta dolorum ea eius
        eligendi, enim et excepturi facilis laboriosam mollitia perspiciatis praesentium quasi quidem reiciendis, sint
        tenetur voluptates voluptatum.
    </div>
    <div>Alias aliquid at dolor ex excepturi incidunt iste laboriosam minima modi mollitia neque quam quisquam quo, quos
        sed veritatis vitae! Accusamus maxime sed vitae! Cumque id magnam perspiciatis rerum vel?
    </div>
    <div>Aut, delectus eos ipsa iste nam natus numquam omnis praesentium quam, quidem sequi unde. Asperiores fugit,
        neque. Alias cumque porro qui unde voluptatum! Cum doloremque id iusto, labore placeat reprehenderit.
    </div>
    <div>Consequatur consequuntur eaque est nam natus quis temporibus, voluptates! Doloremque eos explicabo magni
        mollitia perferendis quis rerum! Ad aspernatur consectetur esse, hic molestiae, nemo perspiciatis quo
        repudiandae, rerum sapiente sequi?
    </div>
    <div>Dignissimos eum expedita iure ratione voluptatibus. Accusantium aperiam assumenda atque consectetur cumque
        deserunt dolor doloremque doloribus earum enim ipsam laudantium magnam non nulla perspiciatis quam recusandae
        sed soluta voluptas, voluptates?
    </div>
    <div>Adipisci distinctio dolore eum, iure qui saepe totam! Aliquid assumenda cumque debitis dicta, eius fugit iste
        itaque laboriosam libero, minus modi necessitatibus neque nesciunt nihil obcaecati quia quibusdam ratione sequi.
    </div>
    <div>Adipisci, assumenda aut autem dolorum eos ipsum iure possimus quaerat quidem quod recusandae repellat sed sint!
        Accusantium ad aliquid aut, consequatur exercitationem impedit inventore molestiae, nam nesciunt nobis possimus,
        vitae!
    </div>
    <div>A at commodi cupiditate libero? A accusamus aliquam eligendi fuga magni maiores nulla, quaerat quas quasi
        quidem quod sed similique temporibus vel voluptatum. Dolorum laudantium, minus neque quas sed ut.
    </div>
    <div>Consequatur cumque delectus dignissimos dolores eaque eos excepturi harum in incidunt ipsum nam neque, repellat
        saepe sit sunt suscipit totam voluptatibus! Cumque esse inventore neque porro quaerat similique ut, voluptatem.
    </div>
    <div>Accusamus alias asperiores aspernatur aut dolorum explicabo itaque nostrum obcaecati omnis optio placeat quae
        quasi recusandae rerum sapiente, sed soluta. Architecto earum ipsum minus nobis velit! Earum excepturi fuga
        voluptates?
    </div>
    <div>Ad amet, asperiores cupiditate dignissimos, fugit hic magnam minima modi nam nobis officiis pariatur quae rem
        rerum sequi, tempore tenetur? Doloremque dolores error fugit iste nam quasi totam voluptas. Praesentium.
    </div>
    <div>Ad ducimus iste laboriosam provident voluptas. Ad aliquam consequuntur corporis distinctio doloribus eum
        impedit, libero, magni odio quia reiciendis tempore voluptatibus. Aliquid aperiam eius, impedit iusto nostrum
        unde. At, eum.
    </div>
    <div>Dicta, velit, veritatis. Ab ad aliquam aliquid cum delectus dignissimos dolorem ducimus est excepturi
        exercitationem in incidunt, libero non numquam provident quaerat, quas rerum sapiente sed similique tempora
        tempore temporibus?
    </div>
    <div>Ab aliquid amet animi aspernatur commodi cumque, dignissimos earum eligendi eum fugiat in inventore nobis nulla
        provident, quo reiciendis repellat saepe sapiente sequi tempore temporibus, tenetur voluptatem. Ipsam, maiores,
        veritatis.
    </div>
    <div>Architecto quidem quod repellat repudiandae similique soluta voluptate. Architecto eligendi error ipsam iure
        recusandae sed vero? Accusantium aut, beatae consectetur cupiditate non qui quidem, quo repellat reprehenderit
        saepe sequi sint.
    </div>
    <div>Accusantium adipisci exercitationem inventore, itaque pariatur rem tenetur vitae. Asperiores dicta dolores
        error eveniet exercitationem minima omnis optio rerum. Cumque est exercitationem expedita explicabo illum
        maiores minima nam sit. Amet?
    </div>
    <div>Aspernatur at beatae deleniti distinctio dolore eaque explicabo facere impedit laudantium nihil, quam quasi
        quod repellat similique voluptatem! Alias aut esse eum illo in incidunt, inventore iure nemo veniam voluptates?
    </div>
    <div>Aliquid autem earum eveniet expedita quam quos similique temporibus. Aliquam architecto eveniet exercitationem
        explicabo fuga, illum, ipsum laudantium minus nisi quasi rem, vero voluptate voluptatibus. Aspernatur autem
        ipsam odio optio.
    </div>
</div>

</body>
</html>